<template>
<Row :gutter="30" mgt4>
	<Col :span="isPhone?24:19" sz1 style="line-height:2em;">
		<p sz4>{{article.title}}</p>
		<p gray3 mgt3>
			<span v-if="article.author" mgr3><Icon type="ios-person" mgr1 />文/{{article.author}}</span>
			<span mgr3><Icon type="md-time" mgr1 />{{formatTimeStr(article.creationTime, 'YYYY-MM-DD')}}</span>
			<span><Icon type="md-eye" mgr1 />{{formatClickCount(article.clickCount)}}</span>
		</p>
		<p pdx2 pdy3 bg-gray5 mgt3>{{article.description}}</p>
		<div mgt3 mgb5 v-html="article.content"></div>
		<p mgt5 v-if="article.tags.length">
			<span>标签</span>
			<span v-for="(item, index) in article.tags" :key="index" bd-gray4 mgl1 pd1>{{item}}</span>
		</p>
		<div mgt2 pd2 bd-gray4>
			<p>
				<span>上一篇：</span>
				<router-link v-if="article.prevArticle" gray2 linkable :to="{name:'article-detail',params:{id:article.prevArticle.id,systemtype:systemType}}">{{article.prevArticle.title}}</router-link>
				<span v-else>没有</span>
			</p>
			<p>
				<span>下一篇：</span>
				<router-link v-if="article.nextArticle" gray2 linkable :to="{name:'article-detail',params:{id:article.nextArticle.id,systemtype:systemType}}">{{article.nextArticle.title}}</router-link>
				<span v-else>没有</span>
			</p>
		</div>
		
		<!-- <div class="bigtitle" mgt3>
			<div class="bigtitle-title" sz1>说点什么</div>
		</div>
		<Input type="textarea" mgt2 />
		<Button type="primary" mgt2>发表</Button>

		<div class="bigtitle" mgt3>
			<div class="bigtitle-title" sz1>最新评论</div>
		</div>
		<div bdb-gray4 pdy2>
			<div>
				<span></span>
				<span>潇潇雨未歇</span>
				<span gray3>1小时前</span>
			</div>
			<div mgt2>我觉得库克定价定低了，贵一点才更香</div>
		</div>

		<div mgt2>
			<auto-page :value="page" :auto="false" right></auto-page>
		</div> -->
	</Col>
	<Col v-if="!isPhone" span="5">
		<div class="bigtitle">
			<div class="bigtitle-title">为您推荐</div>
		</div>

		<div v-for="(item, index) in recommendedPage.items" :key=index>
			<p @click=handleGoToDetail(item) mgt2 gray1 long linkable>{{item.title}}</p>
		</div>
	</Col>
</Row>
</template>

<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import AbpBase from '../../lib/abpbase'
import AutoPage from '@common/components/AutoPage'
import Page from '@common/models/Page'
import util from '../../lib/util'

@Component({
	components: {
		AutoPage
	}
})
export default class ArticleDetail extends AbpBase{
	page:Page = new Page('')
	recommendedPage:Page = new Page('/api/services/app/Home/GetArticleRecommendeds').pageSize(8);
	systemType = -1;
	get comments() {
		return this.page.items;
	}
	get title() {
		return ['文章详情', '资讯详情', '微课堂详情', '企业通知'][this.systemType];
	}
	article:any = {
		tags: [],

	}
	formatClickCount(count) {
		if(count < 10000) {
			return count;
		}else {
			var temp= Math.floor(count / 10000);
			return `${temp}万`;
		}
	}
	async getArticle(id) {
		var response = await this.get('Article/GetEnabled', { id: id, withAround: true });
		if(response.success) {
			response.result.content = this.formatContentImage(response.result.content);
			this.article = response.result;
		}

		this.page.action_data.id = id;
		//this.page.getData();
	}
	formatContentImage(content) {
		return content.replace(/\<img/g, '<img style="max-width:100%;height:unset;"')
	}
	handleGoToDetail(item) {
		this.$router.push({
			name: 'article-detail',
			params: {
				id: item.id,
				systemtype: item.systemType.toString()
			}
		});
	}
	async init() {
		var id = this.$route.params.id;
		this.systemType = parseInt(this.$route.params.systemtype);
		await this.getArticle(id);
		util.title(this.title);
	}
	async created() {
		await this.init();

		this.recommendedPage.getData();
	}
	@Watch('$route')
	async handleOnRouteChange() {
		await this.init();
	}
}
</script>
